<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas width="800" height="600"></canvas>
    <script>
        let canvas = document.querySelector('canvas');
        let ctx = canvas.getContext('2d');

        // 路径就是你先指定好一次绘画的过程，然后让ctx帮你实现。比如我们综合一下前面的两个案例，一个路径画聊天框，一个路径画爱心。
        let chatPath = new Path2D();
        let lovePath = new Path2D();

        // 聊天框气泡路径
        chatPath.moveTo(200,200);
        chatPath.quadraticCurveTo(200,100,300,100);
        chatPath.lineTo(500,100);
        chatPath.quadraticCurveTo(600,100,600,200);
        chatPath.quadraticCurveTo(600,300,500,300);
        chatPath.lineTo(300,300);
        chatPath.lineTo(200,350);
        chatPath.lineTo(270,300);
        chatPath.quadraticCurveTo(200,300,200,200);

        // 爱心路径
        lovePath.moveTo(400,150);
        lovePath.bezierCurveTo(480,50,580,200,400,280);
        lovePath.bezierCurveTo(220,200,320,50,400,150);

        // 用画布进行绘制
        ctx.fillStyle = '#F56C6C';
        ctx.stroke(chatPath);
        ctx.fill(lovePath);
    </script>
</body>
</html>